<template>
  <div class="area-select">
    <el-select size="mini" v-model="type" @change="onChangeType" class="area-type" popper-class="area-popper">
      <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
    </el-select>
    <el-cascader
      v-if="type == 'grid'"
      key="grid"
      size="mini"
      v-model="gridValue"
      :props="{ checkStrictly: true }"
      placeholder="请选择"
      :options="areaOptions"
      filterable
      class="area-value"
      popper-class="area-popper"
      @change="changeGridValue"
    >
      <template slot-scope="{ data }">
        <div @click="changeGrid(data)">
          <span>{{ data.label }}</span>
        </div>
      </template></el-cascader
    >
    <el-cascader
      v-else
      key="region"
      :options="regionData"
      :props="{ checkStrictly: true }"
      @change="changeValue"
      v-model="regionValue"
      filterable
      size="mini"
      class="area-value"
      popper-class="area-popper"
    >
      <template slot-scope="{ data }">
        <div @click="changeRegion(data)">
          <span>{{ data.label }}</span>
        </div>
      </template>
    </el-cascader>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { searchFeatures } from '@/assets/modules/areaUtils'
import exportVue from '@/assets/modules/exportVue'
import { getGridList } from '@/assets/modules/service'
import store from '~/assets/modules/store'
@Component({
  name: 'areaSelect',
  components: {}
})
export default class extends Vue {
  get datePickerValue() {
    return this.$store.getters['panelData/datePickerValue']
  }
  get floorGridId() {
    return this.$store.getters['panelData/floorGridId']
  }
  typeOptions: any[] = []
  type = 'grid'
  areaOptions: any[] = []
  areaValue = ''
  regionConfig: any[] = []
  regionData: any = []
  tempData: any[] = []
  regionValue: any = []
  gridValue: any = []
  city: any = {
    value: 'city',
    code: 'city',
    label: '厦门市',
    url: '',
    xzqdm: '',
    xzqmc: ''
  }
  mounted() {
    const win: any = window
    this.typeOptions = win.dataConfig.area.typeOptions
    this.regionConfig = win.urlConfig.regionConfig
    this.getData()
    this.getGridList()
    this.$store.commit('videoData/setAreaType', this.type)
  }
  onChangeType() {
    store.mapView.graphics.removeAll();
    const win: any = window
    if (this.type == 'administrative') {
      if (this.regionData.length > 0) {
        this.regionValue = [this.regionData[0].value]
        this.changeRegion(this.regionData[0])
        console.log(this.regionValue)
      }
    } else {
      if (this.areaOptions.length > 0) {
        this.gridValue = [this.areaOptions[0].value]
        this.changeGrid(this.areaOptions[0])
        console.log(this.gridValue)
      }
    }
    this.$store.commit('videoData/setAreaType', this.type)
    this.$store.commit('videoPanel/setDialogShow', false)
  }
  getData() {
    const i = 0
    this.regionData = []
    if (i < this.regionConfig.length) {
      const regionUrl = this.regionConfig[i].url
      const where = '1=1'
      const xzqdm = this.regionConfig[i].code
      const xzqmc = this.regionConfig[i].name
      let tmpData: any[] = []
      searchFeatures(regionUrl, where).then((res: any) => {
        console.log(res)
        if (res.length > 0) {
          res.forEach((feature: any) => {
            const param: any = {
              value: feature.attributes.OBJECTID,
              code: feature.attributes[xzqdm],
              label: feature.attributes[xzqmc],
              url: regionUrl,
              xzqdm: xzqdm,
              xzqmc: xzqmc
            }
            tmpData.push(param)
          })
          tmpData = tmpData.sort((a: any, b: any) => {
            return a.value - b.value
          })
          this.tempData.push(tmpData)
          if (i < this.regionConfig.length - 1) {
            this.getSubData(i + 1)
          } else {
            this.tempData[0].unshift(this.city)
            this.regionData = this.tempData[0]
            console.log(this.regionData)
          }
        } else {
          this.regionData.push(this.city)
        }
      })
    } else {
      this.regionData.push(this.city)
    }
  }
  getSubData(index: number) {
    let tmpData: any[] = []
    const regionUrl = this.regionConfig[index].url
    const where = '1=1'
    const xzqdm = this.regionConfig[index].code
    const xzqmc = this.regionConfig[index].name
    const parentdm = this.regionConfig[index].parentCode
    searchFeatures(regionUrl, where).then((res: any) => {
      if (res.length > 0) {
        res.forEach((feature: any) => {
          const param: any = {
            value: feature.attributes.OBJECTID,
            code: feature.attributes[xzqdm],
            label: feature.attributes[xzqmc],
            parentValue: feature.attributes[parentdm],
            url: regionUrl,
            xzqdm: xzqdm,
            xzqmc: xzqmc
          }
          tmpData.push(param)
        })
        tmpData = tmpData.sort((a: any, b: any) => {
          return a.value - b.value
        })
        this.tempData.push(tmpData)
        if (index < this.regionConfig.length - 1) {
          this.getSubData(index + 1)
        } else {
          for (let i = this.tempData.length - 1; i > 0; i--) {
            this.tempData[i - 1].forEach((item: any) => {
              item.children = []
              this.tempData[i].forEach((subitem: any) => {
                if (subitem.parentValue === item.code) {
                  item.children.push(subitem)
                }
              })
            })
          }
          this.tempData[0].unshift(this.city)
          this.regionData = this.tempData[0]
          console.log(this.regionData)
        }
      }
    })
  }

  changeValue() {
    this.$store.commit('panel/setDialogShow', false)
    if (this.regionValue.length > 0) {
      if (this.regionValue[0] == 'city') {
        this.$store.commit('view/setRestoration', true)
        exportVue.$emit('area-select-city', this.regionConfig[0].url)
      } else {
        const value = this.regionValue[this.regionValue.length - 1]
        this.tempData[this.regionValue.length - 1].find((item: any) => {
          if (item.value === value) {
            const sqCodeList =
              this.regionValue.length == 3
                ? item.code
                : this.regionValue.length == 2
                ? item.children
                    .map((el: any) => {
                      return el.code
                    })
                    .join(',')
                : item.children
                    .map((el: any) => {
                      return el.children
                        .map((subel: any) => {
                          return subel.code
                        })
                        .join(',')
                    })
                    .join(',')
            const param = {
              url: item.url,
              name: item.value,
              nameField: item.xzqmc,
              codeField: item.xzqdm,
              type: this.regionValue.length,
              sqCodeList: sqCodeList
            }
            exportVue.$emit('area-select', param)
            return true
          }
        })
      }
    }
  }
  changeRegion(data: any) {
    this.$store.commit('panel/setDialogShow', false)
    if (data.value == 'city') {
      this.$store.commit('view/setRestoration', true)
      exportVue.$emit('area-select-city', this.regionConfig[0].url)
    } else {
      const sqCodeList =
        this.regionValue.length == 3
          ? data.code
          : this.regionValue.length == 2
          ? data.children
              .map((item: any) => {
                return item.code
              })
              .join(',')
          : data.children
              .map((el: any) => {
                return el.children
                  .map((subel: any) => {
                    return subel.code
                  })
                  .join(',')
              })
              .join(',')
      const param = {
        url: data.url,
        name: data.value,
        nameField: data.xzqmc,
        codeField: data.xzqdm,
        type: this.regionValue.length,
        sqCodeList: sqCodeList
      }
      exportVue.$emit('area-select', param)
    }
  }

  getGridList() {
    this.areaOptions = []
    const param: any = {
      dataTime: this.datePickerValue
    }
    getGridList(param).then((res: any) => {
      const gridData: any[] = []
      console.log(res)
      if (res?.data?.length > 0) {
        for (let i = 0; i < res.data.length; i++) {
          const item = res.data[i]
          if (item.list && item.list.length > 0) {
            for (let j = 0; j < item.list.length; j++) {
              let subItem = item.list[j]
              subItem.value = subItem.gridId
              subItem.label = subItem.gridName
              subItem.qjmc = item.areaName
              gridData.push(subItem)
            }
          }
          item.children = item.list
          item.value = item.areaName
          item.label = item.areaName
          this.areaOptions.push(item)
        }
        if (this.areaOptions.length > 0) {
          // this.gridValue = [this.areaOptions[0].value]
          // this.changeGrid(this.areaOptions[0])
          console.log(this.areaOptions)
        }
        if (this.floorGridId) {
          for (let i = 0; i < this.areaOptions.length; i++) {
            const item = this.areaOptions[i]
            if (item.children) {
              for (let j = 0; j < item.children.length; j++) {
                const item2 = item.children[j]
                if (item2.gridId == this.floorGridId) {
                  this.gridValue = [item.areaName, item2.gridId]
                  this.changeGridValue()
                }
              }
            }
          }
          this.$store.commit('videoData/setFloorGridId', '')
        }
      }
      console.log(gridData)
      this.$store.commit('videoData/setGridData', gridData)
      if (this.datePickerValue == '') {
        this.$store.commit('videoData/setGridLastData', gridData)
      }
    })
  }

  changeGridValue() {
    this.$store.commit('panel/setDialogShow', false)
    console.log(this.gridValue)
    if (this.gridValue.length > 0) {
      if (this.gridValue[0] == '厦门市') {
        this.$store.commit('view/setRestoration', true)
        exportVue.$emit('grid-select-city')
      } else if (this.gridValue.length == 1) {
        const qjmc = this.gridValue[0]
        exportVue.$emit('grid-select-qjmc', qjmc)
      } else {
        const wgid = this.gridValue[1]
        exportVue.$emit('grid-select', wgid)
      }
    }
  }
  changeGrid(data: any) {
    this.$store.commit('panel/setDialogShow', false)
    if (data.value == '厦门市') {
      this.$store.commit('view/setRestoration', true)
      exportVue.$emit('grid-select-city')
    } else if (data.value.includes('区')) {
      const qjmc = data.value
      exportVue.$emit('grid-select-qjmc', qjmc)
    } else {
      exportVue.$emit('grid-select', data.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.area-select {
  width: 428px;
  height: 36px;
  background-color: rgba(22, 88, 160, 0.18);
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-left: 10px;
}
.area-type {
  width: 110px;
}
.area-value {
  margin: 0 20px;
  width: 294px;
}
</style>
<style lang="scss">
.area-select {
  .el-input__inner {
    background-color: #001022;
    border-radius: 4px;
    border: solid 1px #1658a0;
    font-family: AlibabaPuHuiTi_2_45_Light;
    font-size: 14px;
    line-height: 30px;
    color: #ffffff;
  }
  .el-select .el-input .el-select__caret {
    color: #ffffff;
    font-size: 16px;
  }
  .el-select .el-input.is-focus .el-input__inner {
    border-color: #1658a0;
  }
  .el-select .el-input__inner:focus {
    border-color: #1658a0;
  }
  .el-select:hover .el-input__inner {
    border-color: #1658a0;
  }
  .el-cascader .el-input .el-input__inner:focus,
  .el-cascader .el-input.is-focus .el-input__inner {
    border-color: #1658a0;
  }
  .el-cascader:not(.is-disabled):hover .el-input__inner {
    border-color: #1658a0;
  }

  .el-cascader .el-input .el-icon-arrow-down {
    transition: transform 0.3s;
    font-size: 14px;
  }
  .el-input--mini .el-input__icon {
    line-height: 28px;
  }
  .el-input__prefix,
  .el-input__suffix {
    color: #ffffff;
  }
}
.area-popper {
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_45_Light;
  border: none;
  background-color: rgba(11, 51, 93, 0.95);
  box-shadow: 0px 0px 8px 0px rgba(0, 19, 41, 0.8);
  border-radius: 4px;
  color: #fff;
  .popper__arrow {
    border-bottom-color: rgba(11, 51, 93, 0.95) !important;
    border-top-color: rgba(11, 51, 93, 0.95) !important;
  }
  .popper__arrow::after {
    border-bottom-color: rgba(11, 51, 93, 0.95) !important;
    border-top-color: rgba(11, 51, 93, 0.95) !important;
  }
  .el-cascader-menu {
    color: #fff;
    border-right: none;
  }
  .el-cascader-node.in-active-path,
  .el-cascader-node.is-active,
  .el-cascader-node.is-selectable.in-checked-path {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    color: #3998ff;
  }
  .el-cascader-node:not(.is-disabled):focus,
  .el-cascader-node:not(.is-disabled):hover {
    background-color: transparent;
    background-size: 100% 100%;
    background-image: url(../../assets/images/panels/xialakuangxuanzhongshibeijing.png);
  }
  .el-icon-check:before {
    content: '';
  }
  .el-select-dropdown__item {
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_45_Light;
    color: #fff;
  }
  .el-select-dropdown__item.selected {
    color: #3998ff;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: transparent;
    background-size: 100% 100%;
    background-image: url(../../assets/images/panels/xialakuangxiaoxuanzhongtiao.png);
  }
  .el-scrollbar {
    padding-bottom: 17px !important;
  }
  .el-scrollbar .el-scrollbar__wrap {
    margin-bottom: 0 !important;
    overflow-x: hidden !important;
  }
  .el-scrollbar__view {
    height: calc(100% - 20px);
  }
  .el-scrollbar__thumb {
    background-color: transparent;
  }
  .el-cascader-panel {
    .el-radio {
      width: 100%;
      height: 100%;
      z-index: 10;
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .el-radio__input {
      visibility: hidden;
    }
    .el-cascader-node__postfix {
      top: 10px;
    }
  }
  .el-popover__title {
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_45_Light;
    color: #fff;
  }
}
</style>
